import React from 'react';
import { Carousel } from 'antd-mobile';
// import axios from 'axios';
import { request, baseURL } from "../../utils/request"

import CityInput from "../../components/CityInput"
// 引入图片
import nav1 from "../../assets/images/nav-1.png"
import nav2 from "../../assets/images/nav-2.png"
import nav3 from "../../assets/images/nav-3.png"
import nav4 from "../../assets/images/nav-4.png"

// 引入样式文件
import indexCss from "./index.module.scss";

class Index extends React.Component {
    state = {
        data: [],
        imgHeight: 176,
        navs: [
            { id: 0, text: "整租", src: nav1 },
            { id: 1, text: "合租", src: nav2 },
            { id: 2, text: "地图找房", src: nav3 },
            { id: 3, text: "去出租", src: nav4 }
        ],
        groupList: [],
        newsList: []


    }
    count = 0
    componentDidMount() {
        //执行异步操作
        this.getSwiperList();
        this.getGroupList();
        this.getNewsList();

    }
    getSwiperList() {
        request.get("/home/swiper").then(res => {
            console.log(res)
            const { body } = res.data;
            this.setState({
                data: body

            })
        })
    }
    // 获取租房小组的数据
    getGroupList() {
        request.get("/home/groups").then(res => {
            this.setState({ groupList: res.data.body });
        })
    }
    // 最新资讯数据
    getNewsList() {
        request.get("/home/news").then(res => {
            this.setState({ newsList: res.data.body });
        })
    }

    render() {
        const { navs, groupList, newsList } = this.state;
        return (
            <div>
                {/* 轮播图开始 */}
                <div className={indexCss.index_carousel}>
                    <div className={indexCss.index_city_input}>
                        <CityInput></CityInput>
                    </div>
                    {this.state.data && <Carousel
                        autoplay
                        infinite
                    >
                        {this.state.data.map(val => (
                            <a
                                key={val.id}
                                href="http://www.alipay.com"
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                                <img
                                    src={baseURL + val.imgSrc}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>}

                </div>
                {/* 轮播图 结束 */}
                {/* 快速导航开始 */}
                <div className={indexCss.index_nav}>
                    {navs.map(v => <div className={indexCss.nav_item} key={v.id}><img src={v.src} /><p>{v.text}</p></div>)}
                </div>
                {/* 快速导航 结束 */}
                {/* 租房小组 开始 */}
                <div className={indexCss.index_group}>
                    <div className={indexCss.group_title}>
                        <span>租房小组</span>
                        <span>更多</span>
                    </div>
                    <div className={indexCss.group_content}>
                        {/* 租房内容 */}
                        {groupList.map(v => <div key={v.id} className={indexCss.group_item}>
                            <div className={indexCss.group_item_info}>
                                <div className={indexCss.group_item_title}>{v.title}</div>
                                <div className={indexCss.group_item_desc}>{v.desc}</div>
                            </div>
                            <div className={indexCss.group_item_img}>
                                <img src={baseURL + v.imgSrc} alt="" />
                            </div>
                        </div>)}
                    </div>
                </div>
                {/* 租房小组 结束 */}
                {/* 最新咨询开始 */}
                <div className={indexCss.index_news}>
                    <div className={indexCss.news_title}>最新资讯</div>
                    <div className={indexCss.news_content}>
                        {
                            newsList.map(v => <div className={indexCss.news_item} key={v.id}>
                                <div className={indexCss.news_item_img}><img src={baseURL + v.imgSrc} /></div>
                                <div className={indexCss.news_item_info}>
                                    <div className={indexCss.news_item_title}>{v.title}</div>
                                    <div className={indexCss.news_item_desc}>
                                        <span className={indexCss.from}>{v.from}</span>
                                        <span className={indexCss.date}>{v.date}</span>
                                    </div>
                                </div>
                            </div>)
                        }
                    </div>
                </div>
                {/* 最新咨询结束 */}
            </div>
        );
    }
}

export default Index;